.el-drawer {
  @apply opacity-100;
  --el-drawer-padding-primary: 24px;
  box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.05);

  &__header {
    @apply mb-4;
  }

  &__title {
    @apply text-lg text-black font-semibold;
  }

  &__footer {
    @apply p-6 bg-gray-50 border-t border-gray-200;
  }

  &__close-btn {
    i {
      transition: color 0.2s ease;
      @apply text-gray-400;
    }

    &:hover i,
    &:focus i {
      @apply text-gray-600;
    }
  }

  &.bordered {
    .el-drawer__header {
      @apply mb-6;
    }
    .el-drawer__body {
      @apply border-t border-gray-200;
    }
  }

  &.no-padding {
    .el-drawer__body {
      @apply p-0;
    }
  }
}
